<template>
	<view class="content">
		<login-popup v-if="modalShow"></login-popup>
		<!--全局遮罩层 未登录和绑定教务禁止使用-->
		<u-overlay :show="!loginState || !userInfo.isBindJwgl" :z-index="999" :opacity="0.3">
			<view class="warp">
				<view class="btn-group">
					<view class="btn-right" @click="bindUse">绑定使用</view>
				</view>
			</view>
		</u-overlay>
		<!--提示-->
		<u-alert type="primary" :title="notice.title" :description="notice.description" :show-icon="true"></u-alert>
		<!--分段器-->
		<view class="fun">
			<view class="subsection">
				<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			</view>
		</view>
		
		<!--我的课表-->
		<view v-show="curNow == 0">
			<!--横轴 头部列表-->
			<view class="flex-row head">
				<view class="head-left flex-column j_c" @click="handleWeek">
					<text class="head-left-text one">第</text>
					<text class="head-left-text two">周</text>
					<text class="head-curr-week">{{currentWeek}}</text>
					<text class="head-left-text three">⬇</text>
				</view>
				<view class="head-right flex-row j_b">
					<view :class="isKcClass" class="flex-column j_c" v-for="(item, index) in weekList" :key="index">
						<text class="head-week" :class="item.isCurr && 'head-right-curr'">{{item.week}}</text>
						</br>
						<text :class="item.isCurr && 'head-right-curr'">{{item.isCurr ? '今天' : item.day}}</text>
					</view>
				</view>
			</view>
			<!--下方课表内容-->
			<view class="container flex-row">
				<!--左侧时间-->
				<view class="container-left">
					<block v-for="(item, index) in time" :key="index">
						<view class="flex-column j_c">
							<text class="con-title">{{item.indexOf}}</text></br>
							<text>{{item.timeStart}}</text></br>
							<text>{{item.timeEnd}}</text>
						</view>
					</block>
				</view>
				<!--右侧课表-->
				<view class="container-right">
					<!--循环遍历课表-->
					<view class="flex-row row-style" v-for="(list, _index) in schedule" :key="_index">
						<!--循环遍历课程-->
						<block v-for="(item, index) in list" :key="index">
							<view v-if="item.type" :class="isKcClass" class="con-item flex-column j_c transform-item"
								:style="{background: `${item.bgColor}`}" @click="getDetail(item)" :data-item="item">
								<text class="con-item-subj line_ellipsis">{{item.kcmc}}</text>
								<text class="line_ellipsis">{{item.jxcdmc}}</text>
								<text class="line_ellipsis">{{item.teaxms}}</text>
							</view>
							<!--无课-->
							<view v-else :class="isKcClass" class="con-item flex-column j_c">
							</view>
						</block>
					</view>
				</view>
			</view>
			<!--广告插件 - banner-->
			<view style="width: 100%;margin-top: 5rpx;">
				<ad unit-id="adunit-31fed5d201b3e2d6" @load="unitAdLoad"
					@error="unitAdError" @hide="unitAdHide"></ad>
			</view>
		</view>
		<!--Ta的课表-->
		<view v-show="curNow == 1">
			<block v-if="Object.keys(taSchedule).length === 0 || taSchedule == undefined">
				<u-empty mode="car"
					icon="http://cdn.uviewui.com/uview/empty/car.png" text="暂时还没有Ta的数据喔">
				</u-empty>
			</block>
			<!--横轴 头部列表-->
			<view v-else>
				<view class="flex-row head">
					<view class="head-left flex-column j_c" @click="handleWeek">
						<text class="head-left-text one">第</text>
						<text class="head-left-text two">周</text>
						<text class="head-curr-week">{{currentWeek}}</text>
						<text class="head-left-text three">⬇</text>
					</view>
					<view class="head-right flex-row j_b">
						<view :class="isKcClass" class="flex-column j_c" v-for="(item, index) in weekList" :key="index">
							<text class="head-week" :class="item.isCurr && 'head-right-curr'">{{item.week}}</text>
							</br>
							<text :class="item.isCurr && 'head-right-curr'">{{item.isCurr ? '今天' : item.day}}</text>
						</view>
					</view>
				</view>
				<!--下方课表内容-->
				<view class="container flex-row">
					<!--左侧时间-->
					<view class="container-left">
						<block v-for="(item, index) in time" :key="index">
							<view class="flex-column j_c">
								<text class="con-title">{{item.indexOf}}</text></br>
								<text>{{item.timeStart}}</text></br>
								<text>{{item.timeEnd}}</text>
							</view>
						</block>
					</view>
					<!--右侧课表-->
					<view class="container-right">
						<view class="flex-row row-style" v-for="(list, _index) in taSchedule" :key="_index">
							<block v-for="(item, index) in list" :key="index">
								<view v-if="item.type" :class="isKcClass" class="con-item flex-column j_c transform-item"
									:style="{background: `${item.bgColor}`}" @click="getDetail(item)" :data-item="item">
									<text class="con-item-subj line_ellipsis">{{item.kcmc}}</text>
									<text class="line_ellipsis">{{item.jxcdmc}}</text>
									<text class="line_ellipsis">{{item.teaxms}}</text>
								</view>
								<!--无课-->
								<view v-else :class="isKcClass" class="con-item flex-column j_c">
								</view>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--课表配置-->
		<!-- 课程推送，关注服务号，同步课表-->
		<view v-show="curNow == 2">
			<view class="config">
				<view class="syn-schedule">
					<!--课表同步-->
					<button class="btn" hover-class="btn-active" @click="syncSchedule">课表加载</button>
				</view>
				<view class="syn-schedule">
					<!--课表同步-->
					<button class="btn" hover-class="btn-active" @click="getUserCodeByOpenId">绑定课表</button>
				</view>
			</view>
		</view>
		<!-- 详情操作弹框 -->
		<u-popup :show="isShow" mode="top" overlayOpacity="0.2" :round="10" @close="close"
			:bgColor="currentItem.bgColor">
			<view class="popup">
				<view class="popup-text" :style="currentItem.type ? '' : 'text-decoration: line-through'">
					<u--text :lines="1" :text="currentItem.kcmc" color="#ffffff" align="center" wordWrap="anywhere"></u--text>
					<u--text :lines="1" :text="currentItem.jxcdmc" color="#ffffff" align="center" wordWrap="anywhere"></u--text>
					<u--text :lines="1" :text="currentItem.teaxms" color="#ffffff" align="center" wordWrap="anywhere"></u--text>
					<u--text :lines="1" :text="currentItem.sknrjj" color="#ffffff" align="center" wordWrap="anywhere"></u--text>
				</view>
			</view>
		</u-popup>
		<!--周次选择器-->
		<u-popup :show="zcShow" mode="bottom" overlayOpacity="0.2" closeable="true" :round="10" @close="close"
			bgColor="#ffffff">
			<view class="radio-popup">
				<view class="radio" v-for="(item, index) in weekParam" :key="index">
					<button v-if="item == curWeek" @click="handleBtn(item)" class="btn bgColor">{{item}}</button>
					
					<button v-else @click="handleBtn(item)" :class="item == currentWeek ? 'activeColor' : ''"
						class="btn">{{item}}</button>
				</view>
			</view>
		</u-popup>
		<!--个人课表标识获取-->
		<u-popup :show="show" mode="center" overlayOpacity="0.2" :round="10" @close="codeClose">
			<view class="popup-code">
				<view class="popup-title">
					个人课表标识
				</view>
				<view class="popup-text">
					{{userCode}}
				</view>
				<view class="popup-cro">
					<p>
						<h2>如何绑定课表?</h2>
					<p>
					<p>1：将你的"课表标识"发送给那个Ta</p>
					<p>2：点击头像进入个人信息编辑页面</p>
					<p>3：讲Ta的课表标识填入"绑定课表"中</p>
					<p>4：点击保存就可以看到Ta的课表啦</p>
					<p>(需要被绑定的那方同步课表先喔)</p>
				</view>
				<view class="popup-button">
					<u-button type="primary" text="复制并关闭" @click="btnClose"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		formateDate,
		getCurrWeekList
	} from "@/utils/modules/time.js"
	import {
		getScheduleList,
		getWeekList,
		restoreScheduleById,
		synScheduleData
	} from "@/plugins/api/scheduleApi.js"
	import { getUserCode } from '@/plugins/api/userApi.js'
	export default {
		data() {
			return {
				notice: {
					title: '配置课表可手动更新课表',
					description: '0304节(12号、13号教学楼上课时间为)10:20-11:40'
				},
				currentWeek: 1,
				curWeek: 0, // 保存当前周
				weekParam: [],
				userCode: '', // 用户标识
				show: false,
				time: [
				],
				schedule: {
					// a: [{
					// 	scheduleId: 0,
					// 	kcmc: '编译原理',
					// 	jxcdmc: 'B202',
					// 	teaxms: "苏苏苏",
					// 	bgColor: '#fad0c4',
					// 	type: true, //false-无  true-有
					// }]
				},
				taSchedule: {}, // Ta的课表
				isKc: true, // 表示周六日是否有课，默认有课
				isKcClass: 'con-item-7', // 默认七天
				weekList: [],
				isShow: false, // 详情弹窗
				zcShow: false, // 周次弹窗
				currentItem: {},
				// 分段器
				list: ['我的课表', 'Ta的课表', '配置课表'],
				curNow: 0, // 默认我的课表
			}
		},
		onLoad() {
		},
		onHide() {
			// 切换页面关闭所有弹窗
			this.close()
		},
		onShow() {
			// 加载本周课表数据
			this.getScheduleData()
		},
		computed: {
			...mapState('user', ['modalShow', 'openId', 'userInfo', 'loginState', 'isJwgl'])
		},
		// 监听数据
		watch: {
			currentWeek() {
				var code = this.userInfo.userCode
				if (this.curNow == 1) {
					code = this.userInfo.bingCode
				}
				getScheduleList({
					userCode: code,
					zc: this.currentWeek
				}).then(res => {
					if (res.data.status == 1) {
						if (this.loginState && this.userInfo.isBindJwgl) {
							uni.$u.toast('本周无课')
						}
						if (this.curNow == 0) {
							this.schedule = {}
						}
						if (this.curNow == 1) {
							this.taSchedule = {}
						}
					} else {
						if (this.curNow == 0) {
							this.schedule = {}
							this.schedule = res.data.data.schedule
							this.isKc = res.data.data.isKc
						}
						if (this.curNow == 1) {
							this.taSchedule = {}
							this.taSchedule = res.data.data.schedule
							this.isKc = res.data.data.isKc
						}
						this.time = res.data.data.time
					}
				}).catch(err => {
					console.log(err)
				})
				// 构造head列表
				let week = this.currentWeek - this.curWeek
				let time = new Date(new Date().getTime() + week*24*7*60*60*1000); //往后推7天
				let list = getCurrWeekList(time)
				this.weekList = []
				if (this.isKc) {
					this.isKcClass = 'con-item-7'
					list.forEach(item => {
						this.weekList.push({
							day: [item.split('-')[1], item.split('-')[2]].join('-'),
							week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),
							isCurr: week == 0 ? formateDate(time) == item : false
						})
					})
				} else {
					this.isKcClass = 'con-item-5'
					list.forEach(item => {
						this.weekList.push({
							day: [item.split('-')[1], item.split('-')[2]].join('-'),
							week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),
							isCurr: week == 0 ? formateDate(time) == item : false
						})
					})
					this.weekList.splice(this.weekList.length - 1)
					this.weekList.splice(this.weekList.length - 1)
				}
			},
			isKc() {
				// 构造head列表
				let week = this.currentWeek - this.curWeek
				let time = new Date(new Date().getTime() + week*24*7*60*60*1000); //往后推7天
				let list = getCurrWeekList(time)
				this.weekList = []
				if (this.isKc) {
					this.isKcClass = 'con-item-7'
					list.forEach(item => {
						this.weekList.push({
							day: [item.split('-')[1], item.split('-')[2]].join('-'),
							week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),
							isCurr: week == 0 ? formateDate(time) == item : false
						})
					})
				} else {
					this.isKcClass = 'con-item-5'
					list.forEach(item => {
						this.weekList.push({
							day: [item.split('-')[1], item.split('-')[2]].join('-'),
							week: "星期" + "日一二三四五六".charAt((new Date(item)).getDay()),
							isCurr: week == 0 ? formateDate(time) == item : false
						})
					})
					this.weekList.splice(this.weekList.length - 1)
					this.weekList.splice(this.weekList.length - 1)
				}
			}
		},
		methods: {
			...mapActions('user', ['openIsJwglAction', 'closeIsJwglAction']),
			// 广告
			unitAdLoad() {
				console.log('原生模板广告加载成功')
			},
			unitAdError(err) {
				console.log('原生模板广告加载失败', err)
			},
			unitAdHide() {
				console.log('原生模板广告隐藏')
			},
			// 打开并获取我的个人标识
			async getUserCodeByOpenId() {
				this.show = true
				await getUserCode({openId: this.openId}).then(res => {
					this.userCode = res.data.data
				}).catch(err => {
					console.log(err)
				})
			},
			// 复制个人标识并关闭
			codeClose() {
				// 复制到粘贴板
				this.show = false
			},
			// 按钮复制并关闭
			btnClose() {
				this.show = false
				uni.setClipboardData({
					data: this.userCode,
					success(res) {
						uni.$u.toast('已复制个人标识')
					}
				})
			},
			// 获取本周课表
			async getScheduleData() {
				await getWeekList({}).then(res => {
					this.currentWeek = res.data.data.currentWeek
					this.curWeek = this.currentWeek
					this.weekParam = res.data.data.weekParam
				})
				uni.showLoading({
					title: '正在加载课表...'
				})
				await getScheduleList({
					userCode: this.userInfo.userCode,
					zc: this.currentWeek
				}).then(res => {
					if (res.data.status == 1) {
						if (this.loginState && this.userInfo.isBindJwgl) {
							uni.$u.toast('本周无课')
						}
						if (this.curNow == 0) {
							this.schedule = {}
						}
						if (this.curNow == 1) {
							this.taSchedule = {}
						}
					} else {
						if (this.curNow == 0) {
							this.schedule = {}
							this.schedule = res.data.data.schedule
							this.isKc = res.data.data.isKc
						}
						if (this.curNow == 1) {
							this.taSchedule = {}
							this.taSchedule = res.data.data.schedule
							this.isKc = res.data.data.isKc
						}
						this.time = res.data.data.time
					}
				}).catch(err => {
					console.log(err)
				})
				uni.hideLoading()
			},
			// 打开详情窗口
			getDetail(e) {
				this.currentItem = e
				this.isShow = true
			},
			// 关闭弹窗
			close() {
				this.show = false
				this.isShow = false
				this.zcShow = false
			},
			// 分段器控制
			async sectionChange(index) {
				this.curNow = index
				if (index == 0) {
					this.getScheduleData()
				}
				if (index == 1 && this.userInfo.bingCode && this.userInfo.bingCode != '') {
					// 进入Ta的课表数据页面
					// 判断是否有Ta的数据
					// 查询课表
					await getScheduleList({
						userCode: this.userInfo.bingCode,
						zc: this.currentWeek
					}).then(res => {
						// 只对课表赋值
						this.taSchedule = {}
						this.taSchedule = res.data.data.schedule
					}).catch(err => {
						console.log(err)
					})
				}
			},
			// 选择周次
			handleWeek() {
				this.zcShow = true
			},
			handleBtn(i) {
				this.currentWeek = i
			},
			// 未登录&未绑定
			bindUse() {
				this.$navTo('/page_my/pages/bind-jwgl')
			},
			// 单独同步课表数据
			async syncSchedule() {
				// 判断是否有链接正在执行
				if (!this.isJwgl) {
					uni.$u.toast('存在数据正在同步，别着急喔！')
					return;
				}
				await synScheduleData({
					openId: this.openId,
					sign: "sinder@1021"
				}).then(res => {
					// 异步执行，不会进来这里
				}).catch(err => {
					let that = this
					if (err.data == '') {
						this.openIsJwglAction()
						uni.$u.toast('数据同步中，5s后重载')
						setTimeout(function() {
						  // 这里写要延时执行的代码
						  that.closeIsJwglAction()
						  // 成功跳转
						  that.getScheduleData()
						}, 5000); // 5s刷新数据
						this.curNow = 0
					} else {
						uni.$u.toast(err.data.msg)
					}	
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F8F8F8;
	}

	.content {

		// 遮罩
		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 100%;

			.btn-group {
				display: flex;
				justify-content: center;
				padding: 0 16rpx;

				.btn-right {
					width: 300rpx;
					height: 88rpx;
					line-height: 88rpx;
					border-radius: 16rpx;
					text-align: center;
					background: linear-gradient(-46.8deg, rgba(63, 101, 255, 1) 0%, rgba(97, 141, 255, 1) 100%);
					color: #fff;
				}
			}
		}

		.head {
			width: 100%;
			height: 10%;
			margin-left: 10rpx;
		}

		.head-left {
			// border-radius: 10rpx;
			height: 99rpx;
			background: #fff;
			width: 10%;
			position: relative;
			border-bottom: 1rpx solid #e6e6e6;
		}

		.head-left-text {
			position: absolute;
			color: #7e7a7a;
			font-size: 22rpx;
		}

		.head-curr-week {
			font-weight: bold;
			font-size: 40rpx;
			font-style: italic;
			/* 斜体 font-style:oblique;或者 font-style: italic;*/
		}

		.head-left-text.one {
			right: 0px;
			top: 2px;
		}

		// 改
		.head-left-text.two {
			left: 10rpx;
			bottom: 20rpx;
		}
		
		.head-left-text.three {
			right: 10rpx;
			bottom: 20rpx;
		}

		.head-week {
			font-weight: bold;
			margin-bottom: 10rpx;
			color: #333;
		}

		.head-right {
			// border-radius: 10rpx;
			height: 100rpx;
			background: #fff;
			width: 89%;
			font-size: 23rpx;
			box-sizing: border-box;
			color: #7e7a7a;
			// padding-left: 1%;
			border-bottom: 1rpx solid #e6e6e6;
			border-left: 1rpx solid #e6e6e6;
			
			.con-item-7 {
				margin-left: 1.28%;
				width: 13%;
			}
			
			.con-item-5 {
				margin-left: 1%;
				width: 18.5%;
			}
			
			.j_c {
				padding-top: 2%;
				text-align: center;
			}
			
			.head-right-curr {
				color: #ff007f;
			}
		}

		.con-title {
			font-weight: bold;
			margin-bottom: 6rpx;
			color: #333;
			font-size: 27rpx;
			font-style: italic;
		}

		.container {
			margin-left: 10rpx;
			height: 90%;
			width: 100%;
		}
		
		.container-left {
			// border-radius: 10rpx;
			// height: 500rpx;
			background: #fff;
			width: 10%;
			// margin-right: 10rpx;
			// box-sizing: border-box;
			// padding: 20rpx 0;
			font-size: 24rpx;
			color: #7e7a7a;
			border-right: 1rpx solid #e6e6e6;

			.j_c {
				text-align: center;
				padding-top: 5rpx;
				height: 100rpx;
				font-size: 20rpx;
				border-bottom: solid 1rpx #e6e6e6;
			}
		}

		.container-right {
			// border-radius: 10rpx;
			// height: 500rpx;
			background: #fff;
			width: 89%;
			position: relative;
			// box-sizing: border-box;
			// padding-left: 1%;

			.row-style {
				border-bottom: 1rpx solid #d5d5d5;
				padding-top: 5rpx;
			}
		}
		
		.con-item-7 {
			width: 13%;
			margin-left: 1.28%;
		}
		
		.con-item-5 {
			margin-left: 1%;
			width: 18.5%;
		}

		.con-item {
			// width: 85rpx;
			
			height: 206rpx;
			border-radius: 10rpx;
			// margin-left: 1.35%;
			
			flex-shrink: 0;
			font-size: 16rpx;
			color: #fff;
			box-sizing: border-box;
			line-height: 20rpx;
			padding: 10rpx;
			.add-icon {
				padding-top: 80rpx;
				padding-left: 8rpx;
			}
		}

		// 动画属性
		.transform-item {
			animation: show 0.5s ease-in-out;
		}

		// 动画效果
		@keyframes show {
			0% {
				opacity: 0.3;
			}

			100% {
				opacity: 1;
			}
		}

		.con-item-subj {
			font-weight: bold;
			font-size: 18rpx;
			margin-bottom: 5rpx;
		}

		.con-item:last-child {
			margin-right: 0;
		}

		/* 多行文字换行 */
		.line_ellipsis {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
		}

		// 弹窗
		.popup {
			height: 233rpx;
			
			.popup-text {
				margin-top: 20rpx;
			}

			.popup-button {
				margin-top: 40rpx;

				.btn {
					margin: 20rpx 25% 0 25%;
					width: 50%;
				}
			}
		}

		.radio-popup {
			height: 350rpx;
		}

		// 添加课程弹窗
		.add-popup {
			width: 500rpx;
			height: 550rpx;

			.add-form {
				width: 90%;
				padding: 10% 5% 0 5%;
			}
		}
		
		
		// 绑定课表
		.popup-code {
			width: 450rpx;
			height: 500rpx;
			
			.popup-title {
				padding-top: 30rpx;
				color: #E9AF3E;
				width: 100%;
				text-align: center;
				font-size: 26rpx;
			}
			
			.popup-text {
				padding-top: 45rpx;
				font-size: 45rpx;
				color: #EA0E29;
				width: 100%;
				text-align: center;
			}
			
			.popup-cro {
				padding-top: 15rpx;
				color: #7ee5ee;
				width: 100%;
				text-align: left;
				text-indent: 1em;
				font-size: 24rpx;
			}
			
			.popup-button {
				padding-top: 30rpx;
				width: 350rpx;
				margin-left: 50rpx;
			}
		}

		.fun {
			width: 100%;
			height: 70rpx;
			// 分段器
			.subsection {
				// float: left;
				// width: 75%;
				width: 100%;
				height: 70rpx;
			}
		}
		

		// 周次选择
		.radio-popup {
			width: 90%;
			margin: 60rpx 5% 20rpx 5%;
			background-color: #ffffff;

			.radio {
				float: left;
				width: 15%;
				height: 50rpx;
				margin-left: 4%;
				margin-top: 30rpx;

				.btn {
					width: 100%;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 30rpx;
					border: none;
					background-color: #ffffff;
					box-shadow: 5px 6px 10px #f3f3f3;
				}

				.bgColor {
					color: #ffffff;
					background-color: #9FCEFF;
				}
				
				.activeColor {
					color: #ffffff;
					background-color: #20cbff;
				}
			}
		}
		
		// 课表配置
		.config {
			width: 100%;
			margin: 0 auto;
			
			.syn-schedule {
				float: left;
				width: 200rpx;
				height: 200rpx;
				padding: 50rpx 30rpx 0 50rpx;
				.btn {
					width: 100%;
					height: 100%;
					background: #68d8d1;
					color: #fff;
					border: none;
					border-radius: 30rpx;
					text-align: center;
					line-height: 200rpx;
					font-size: 35rpx;
				}
				.btn-active {
					background: #70e8e0;
				}
			}
		}
	}
</style>